<template>
    <div class="node-panel" v-if="showPanel">
      <div class="node-item" @mousedown="addStartNode()" title="开始节点只能有一个出口，不能有入口">
        <img src="../registerNode/img/start.png" width="48px" :draggable="false" alt="" >
        <span class="node-label">开始</span>
      </div>
      <div class="node-item" @mousedown="addBusinessNode()" title="业务节点至少有一个入口，至少有一个出口">
        <img src="../registerNode/img/node.png" width="48px" :draggable="false" alt="" >
        <span class="node-label">业务能力</span>
      </div>
      <div class="node-item" @mousedown="addIfNode()" title="分支条件节点只能有一个入口，可以有多个出口">
        <img src="../registerNode/img/if.png" width="48px" :draggable="false" alt="" >
        <span class="node-label">分支条件</span>
      </div>
      <div class="node-item" @mousedown="addAndNode()" title="并行汇聚节点只能有一个出口，可以有多个出口">
        <img src="../registerNode/img/and.png" width="48px" :draggable="false" alt="" >
        <span class="node-label">并行汇聚</span>
      </div>
      <div class="node-item" @mousedown="addEndNode()" title="结束节点至少有一个入口，不能有出口">
        <img src="../registerNode/img/end.png" width="48px" :draggable="false" alt="" >
        <span class="node-label">结束</span>
      </div>
    </div>
  </template>
  <script>
  // 注册节点
  import customNodeTypes from '../registerNode/index'
  import CustomPolyline from '../registerLine/CustomPolyline'
   
  export default {
    name: 'CustomNodePanel',
    data () {
      return {
        lf: null,
      }
    },
    props: {
      graphData: Object,
      showPanel: Boolean
    },
    inject: ['drawThis'],
    mounted () {
      // 注册节点
      this.registerNode()
      if (this.graphData) {
        this.lf.renderRawData(this.graphData)
      }
    },
    methods: {
      registerNode () {
        //创建画板
        this.drawThis.lf = this.drawThis.init()
        //注册自定义节点类型
        this.drawThis.lf.register(customNodeTypes.CustomAnd)
        this.drawThis.lf.register(customNodeTypes.CustomEnd)
        this.drawThis.lf.register(customNodeTypes.CustomBusiness)
        this.drawThis.lf.register(customNodeTypes.CustomIf)
        this.drawThis.lf.register(customNodeTypes.CustomStart)
        this.drawThis.lf.register(CustomPolyline)
        this.lf =this.drawThis.lf
        this.drawThis.refreshGraph()
      },
      addStartNode () {
        (this.lf).dnd.startDrag({
          type: 'CustomStart',
          text: '开始',
          properties: { type: 'start' } 
        })
      },
      addBusinessNode () {
        (this.lf).dnd.startDrag({
          type: 'CustomBusiness',
          text: '业务能力',
          properties: { type: 'business' } 
        })
      },
      addIfNode () {
        (this.lf).dnd.startDrag({
          type: 'CustomIf',
          text: '条件',
          properties: { type: 'if' }
        })
      },
      addEndNode () {
        (this.lf).dnd.startDrag({
          type: 'CustomEnd',
          text: '结束',
          properties: { type: 'end', referenceName:'end' }
        })
      },
      addAndNode () {
        (this.lf).dnd.startDrag({
          type: 'CustomAnd',
          text: '合并',
          properties: { type: 'and' }
        })
      }
    }
  }
  </script>
  <style>
  .node-panel {
    position: absolute;
    top: 54px;
    left: 24px;
    width: 50px;
    padding: 10px;
    background-color: white;
    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
    border-radius: 6px;
    text-align: center;
    z-index: 101;
  }
  .node-item {
    margin-bottom: 10px;
  }
  .node-label {
    font-size: 12px;
    margin-top: 5px;
    user-select: none;
  }
  .lf-html-wrapper .custom-html {
    width:96px;
    height:96px;
    border:2px solid #2987ff;
  }
  .lf-html-wrapper .custom-head {
    color:red;
    height:26px;
    line-height:26px;
  }
  .lf-html-wrapper .custom-body {
    color:#2987ff;
    height:50px;
    line-height:50px;
  }
  </style>